<template>
  <a-modal
    style="width: 50%"
    :title="titleMap[mode]"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="false">
    <div style="margin-top: 12px;min-height: 300px;min-width: 650px">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :xs="24" :sm="12">
            <a-form-item label="字典名称" :style="itemStyle">
              <a-input
                type="text"
                placeholder="请输入字典名称"
                v-decorator="['dictName', { rules: [{ required: true, message: '请输入字典名称' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="字典编码" prop="dictCode" :style="itemStyle">
              <a-input
                type="text"
                placeholder="请输入字典编码"
                v-decorator="['dictCode', { rules: [{ required: true, message: '请输入字典编码' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="字典类型" :style="itemStyle">
              <a-select
                placeholder="请选择字典类型"
                allowClear
                v-decorator="['type', { rules: [{ required: true, message: '请选择字典类型' }] }]">
                <a-select-option :value="item.id" v-for="(item, index) in typeList" :key="index">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item label="备注" :style="itemStyle">
              <a-input v-model="addForm.description" placeholder="请输入备注"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <dynamic :title="`${PARTONE}`" :arr="items" ref="dynamicForm"/>
      </a-form>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleSubmit">
        保存
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import dynamic from './dynamic'
import { addDicts, editDicts, detailDicts } from '@/api/base'
const PARTONE = 'partOne'

export default {
    components: { dynamic },
    data () {
        return {
            form: this.$form.createForm(this),
            PARTONE,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,

            addForm: {
                dictName: '',
                dictCode: '',
                type: '',
                description: '',
                items: []
            },
            items: [
                {
                    dictCode: '', // 字典项编码
                    itemText: '', // 字典项文本
                    itemValue: '', // 字典项值
                    description: '' // 字典项描述信息
                }
            ],
            typeList: [{ id: 0, name: 'string' }, { id: 1, name: 'number' }],
            //  表单样式
            wrapperCol: { span: 16 },
            labelCol: { span: 6 },
            iconChooseVisible: false,
            itemStyle: 'float: left;width: 50%;min-width:300px'
        }
    },
    methods: {
        // 显示
        open (mode = 'add') {
            this.mode = mode
            this.visible = true
            return this
        },
        // 获取行数据和id
        setData (row) {
            this.rowData = row
            if (this.mode == 'edit') {
                detailDicts(row.dictId).then(res => {
                    const data = res.data
                    if (res.code == 200) {
                        this.form.setFieldsValue({
                            dictName: data.dictName,
                            dictCode: data.dictCode,
                            type: data.type,
                            description: data.description
                        })
                        this.items = data.items
                        this.$nextTick(() => {
                            this.$refs.dynamicForm.init()
                        })
                        this.addForm = res.data
                    }
                    console.log(res)
                })
            }
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
        },
        // 提交
        handleSubmit () {
            const { form: { validateFields } } = this
            const _this = this
            this.loadingBtn = true
            this.visibleBtn = true
            validateFields((errors, values) => {
                if (!errors) {
                    const partOneArr = []
                    this.addForm = values
                    values[`${PARTONE}dictCode`].forEach((item, index) => {
                        const obj = {
                            dictCode: values[`${PARTONE}dictCode`][index],
                            itemText: values[`${PARTONE}itemText`][index],
                            itemValue: values[`${PARTONE}itemValue`][index],
                            description: values[`${PARTONE}description`][index]
                        }
                        partOneArr.push(obj)
                    })
                    this.addForm.items = partOneArr
                    if (this.mode == 'edit') this.addForm.dictId = this.rowData.dictId
                    const Api = this.mode == 'add' ? addDicts : editDicts
                    Api(this.addForm).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            _this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                        } else {
                            _this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        _this.visibleBtn = false
                        _this.visible = false
                        _this.loadingBtn = false
                        _this.$emit('success')
                    }).finally(res => {
                        _this.loadingBtn = false
                        _this.visibleBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                }
            })
        }
    }
}
</script>
